Preserve aspect ratio of svg elements when changing their width
#19368
Conversation
WalkthroughThe change modifies Pre-merge checks✅ Passed checks (2 passed)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/tailwindcss/preflight.css (1)
225-230: Good change—extends responsive constraint rules to SVGs.The addition of
svgto the media constraint rule is well-motivated and consistent with existing preflight treatment. SVGs are already included in the replaced elements rule (line 210), and extendingmax-width: 100%andheight: autoensures they scale responsively just like images and videos. This prevents SVG overflow and allows width changes (e.g., fromw-*Tailwind classes) to proportionally adjust height.Optional: Update the comment for accuracy.
The comment on line 222 describes the rule as constraining "images and videos," but it now also applies to SVGs. Consider updating it to reflect all three element types for clarity.
/* - Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) + Constrain images, videos, and SVGs to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */
|
For my reference later see also: #506 |
2 participants
Summary
Not sure if there's any reason why the "Constrain images and videos to the parent width and preserve their intrinsic aspect ratio" rule of Preflight doesn't apply to
svgelements, as they behave pretty much the same asimgs, in that they also acceptwidthandheightattributes and have an intrinsic aspect ratio. Addingmax-width: 100%to ansvgwith these attributes ensures that it doesn't overflow its container, and addingheight: autoensures that changing its width (either due to themax-width: 100%, or to aw-*class) also changes the height proportionally, instead of it being locked to the value of theheightattribute.Test plan
"Works
on my machinein my projects"